import React from "react";
import { Drawer, Button } from 'antd';
import  * as Icon from '@ant-design/icons';
import "./index.less";
class Settings extends React.Component {
	state = { 
		visible: false,
		handle: <div/>
	};

  showDrawer = () => {
    this.setState({
      visible: true,
    });
  };

  onClose = () => {
    this.setState({
      visible: false,
    });
  };

  render() {
    return (
      <div className="setting-drawer">
		<div className="setting-drawer-index-handle">
			<div className={this.state.visible ? "show" : "hide"} onClick={this.showDrawer}>{React.createElement(Icon['SettingOutlined'])}</div>
		</div>
        <Drawer
			width="300"
			placement="right"
			closable={false}
			onClose={this.onClose}
			visible={this.state.visible}
			handle={this.state.handle}
			getContainer={false}
        >
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
        </Drawer>
      </div>
    );
  }
}

export default Settings
